<template>
	<el-drawer
		v-model="visible"
		title="案件详情"
		size="80%"
		:destroy-on-close="true"
		direction="rtl"
	>
		<div class="detail-container">
			<!-- 基本信息 -->
			<el-descriptions
				:column="2"
				class="casedetail-custom-descriptions"
				border
			>
				<el-descriptions-item label="案件编号">
					{{ data.code || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="案件定性">
					{{ getCaseNatureText(data.caseNature) || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="案件状态">
					<el-tag :type="getCaseStatusType(data.caseStatus)">
						{{ formatCaseStatus(data.caseStatus) }}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="发现时间">
					{{ data.findTime || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="地点" :span="2">
					{{ data.address || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="点位类型">
					{{ getPointTypeText(data.pointType) || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="点位名称">
					{{ data.pointName || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="涉及车辆">
					{{ data.involveCar || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="涉及运企">
					{{ data.companyNames || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="其他">
					{{ data.other || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="拉运趟数">
					{{ data.planNum || '0' }}
				</el-descriptions-item>
				<el-descriptions-item label="累计方量">
					{{ data.addVolume || '0' }}
				</el-descriptions-item>
				<el-descriptions-item label="接收人员" :span="2">
					{{ data.receiveBys || '暂无' }}
				</el-descriptions-item>
				<el-descriptions-item label="案件描述" :span="2">
					<div class="case-description">{{ data.caseDesc || '暂无描述' }}</div>
				</el-descriptions-item>
				<el-descriptions-item label="处置依据" :span="2">
					<div class="case-description">{{ data.according || '暂无' }}</div>
				</el-descriptions-item>
			</el-descriptions>

			<!-- 结案信息 -->
			<el-divider v-if="data.caseStatus === '2'">
				<span class="divider-title">结案信息</span>
			</el-divider>

			<div v-if="data.caseStatus === '2'" class="case-closure-info">
				<el-descriptions border>
					<el-descriptions-item label="处理陈述" width="120" label-width="120">
						<div class="case-description">
							{{ data.handleDesc || '暂无处理陈述' }}
						</div>
					</el-descriptions-item>
				</el-descriptions>

				<!-- 结案附件 -->
				<div v-if="data.attachment" class="attachment-section">
					<h3>结案附件</h3>
					<div class="attachment-list">
						<div
							v-for="(url, index) in closureAttachments"
							:key="index"
							class="attachment-item"
						>
							<el-link :href="url" target="_blank" type="primary">
								<el-icon><Document /></el-icon>
								附件{{ index + 1 }}
							</el-link>
						</div>
					</div>
				</div>
			</div>

			<!-- 图片资料 -->
			<el-divider>
				<span class="divider-title">图片资料</span>
			</el-divider>

			<!-- 卫星截图 -->
			<div v-if="satellitePics.length > 0" class="image-section">
				<h3>卫星截图/轨迹回溯图</h3>
				<div class="image-grid">
					<div
						v-for="(url, index) in satellitePics"
						:key="'satellite-' + index"
						class="image-item"
					>
						<el-image
							:src="url"
							fit="cover"
							:preview-src-list="satellitePics"
							:initial-index="index"
							preview-teleported
						/>
					</div>
				</div>
			</div>

			<!-- 排放源头现场图 -->
			<div v-if="startingPics.length > 0" class="image-section">
				<h3>排放源头现场资料图</h3>
				<div class="image-grid">
					<div
						v-for="(url, index) in startingPics"
						:key="'starting-' + index"
						class="image-item"
					>
						<el-image
							:src="url"
							fit="cover"
							:preview-src-list="startingPics"
							:initial-index="index"
							preview-teleported
						/>
					</div>
				</div>
			</div>

			<!-- 末端终点现场图 -->
			<div v-if="terminalingPics.length > 0" class="image-section">
				<h3>末端终点现场资料图</h3>
				<div class="image-grid">
					<div
						v-for="(url, index) in terminalingPics"
						:key="'terminaling-' + index"
						class="image-item"
					>
						<el-image
							:src="url"
							fit="cover"
							:preview-src-list="terminalingPics"
							:initial-index="index"
							preview-teleported
						/>
					</div>
				</div>
			</div>

			<!-- 拉运物料资料图 -->
			<div v-if="rockPics.length > 0" class="image-section">
				<h3>拉运物料资料图</h3>
				<div class="image-grid">
					<div
						v-for="(url, index) in rockPics"
						:key="'rock-' + index"
						class="image-item"
					>
						<el-image
							:src="url"
							fit="cover"
							:preview-src-list="rockPics"
							:initial-index="index"
							preview-teleported
						/>
					</div>
				</div>
			</div>

			<!-- 附件资料 -->
			<el-divider v-if="data.dataDetailPic">
				<span class="divider-title">数据明细表</span>
			</el-divider>

			<div class="attachment-list" v-if="data.dataDetailPic">
				<div
					v-for="(url, index) in attachmentList"
					:key="index"
					class="attachment-item"
				>
					<el-link :href="url" target="_blank" type="primary">
						<el-icon><Document /></el-icon>
						附件{{ index + 1 }}
					</el-link>
				</div>
			</div>
		</div>
	</el-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Document } from '@element-plus/icons-vue';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	data: {
		type: Object,
		default: () => ({}),
	},
});

const emit = defineEmits(['update:modelValue']);

// 控制抽屉显示
const visible = computed({
	get: () => props.modelValue,
	set: (val) => emit('update:modelValue', val),
});

// 附件列表
const attachmentList = computed(() => {
	if (!props.data.dataDetailPic) return [];
	return props.data.dataDetailPic.split(',').filter(Boolean);
});

// 处理多个图片URL
const satellitePics = computed(() => {
	if (!props.data.satellitePic) return [];
	return props.data.satellitePic.split(',').filter(Boolean);
});

const startingPics = computed(() => {
	if (!props.data.startingPic) return [];
	return props.data.startingPic.split(',').filter(Boolean);
});

const terminalingPics = computed(() => {
	if (!props.data.terminalingPic) return [];
	return props.data.terminalingPic.split(',').filter(Boolean);
});

const rockPics = computed(() => {
	if (!props.data.rockPic) return [];
	return props.data.rockPic.split(',').filter(Boolean);
});

// 案件定性选项
const caseNatureOptions = [
	{ value: '1', label: '疑似违规消纳' },
	{ value: '2', label: '非作业时段作业' },
	{ value: '3', label: '货物异常' },
	{ value: '4', label: '作业车辆GPS离线' },
	{ value: '5', label: '现场围栏缺口' },
];

// 获取案件定性文本
function getCaseNatureText(value) {
	const option = caseNatureOptions.find((item) => item.value === value);
	return option ? option.label : value;
}

// 格式化案件状态
function formatCaseStatus(status) {
	const map = {
		'0': '草稿',
		'1': '已提交',
		'2': '已结案',
	};
	return map[status] || status;
}

// 获取案件状态标签类型
function getCaseStatusType(status) {
	const map = {
		'0': 'info',
		'1': 'primary',
		'2': 'success',
	};
	return map[status] || '';
}

// 点位类型选项
const pointTypeOptions = [
	{ label: '源头点位', value: '1' },
	{ label: '末端点位', value: '2' },
	{ label: '疑似点位', value: '3' },
];

// 获取点位类型文本
function getPointTypeText(value) {
	const option = pointTypeOptions.find((item) => item.value === value);
	return option ? option.label : value;
}

// 结案附件列表
const closureAttachments = computed(() => {
	if (!props.data.attachment) return [];
	return props.data.attachment.split(',').filter(Boolean);
});
</script>

<style>
/* 设置 el-descriptions__content 的固定宽度 */
.casedetail-custom-descriptions .el-descriptions__content {
	width: 40%;
}
</style>
<style lang="scss" scoped>
.detail-container {
	height: 100%;
	padding: 20px;
	overflow-y: auto;
}

:deep(.el-descriptions__label) {
	background-color: #f5f7fa;
	min-width: 120px;
}

.case-description {
	padding: 16px;
	background-color: #f9f9f9;
	border-radius: 4px;
	min-height: 60px;
	white-space: pre-wrap;
}

.image-section {
	margin-bottom: 30px;

	h3 {
		font-size: 16px;
		margin-bottom: 16px;
		color: #303133;
		font-weight: 600;
	}
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;

	.image-item {
		aspect-ratio: 4/3;
		border-radius: 4px;
		overflow: hidden;
		border: 1px solid #e4e7ed;
		transition: all 0.3s;

		&:hover {
			transform: translateY(-3px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		:deep(.el-image) {
			width: 100%;
			height: 100%;
			cursor: pointer;

			img {
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
	}
}

.attachment-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;

	.attachment-item {
		padding: 12px 16px;
		background-color: #f5f7fa;
		border-radius: 4px;
		transition: all 0.3s;

		&:hover {
			background-color: #ecf5ff;
		}

		.el-link {
			display: flex;
			align-items: center;
			gap: 8px;
		}
	}
}

.divider-title {
	font-size: 16px;
	font-weight: 600;
	color: #303133;
}

/* 添加全局样式，确保预览窗口正确显示 */
:deep(.el-image-viewer__wrapper) {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2000;
}

:deep(.el-image-viewer__mask) {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.5;
	background: #000;
}

:deep(.el-image-viewer__btn) {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	opacity: 0.8;
	box-sizing: border-box;
	user-select: none;
}

:deep(.el-image-viewer__close) {
	top: 40px;
	right: 40px;
	width: 40px;
	height: 40px;
	font-size: 24px;
	color: #fff;
	background-color: #606266;
}

:deep(.el-image-viewer__canvas) {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

:deep(.el-image-viewer__img) {
	max-width: 100%;
	max-height: 100%;
}

.case-closure-info {
	margin-bottom: 30px;
}

.attachment-section {
	margin-top: 20px;

	h3 {
		font-size: 16px;
		margin-bottom: 16px;
		color: #303133;
		font-weight: 600;
	}
}
</style>
